<template>
  <div id="map-container"></div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: '7792a7bf488c206dfda061a212a9a12c'
}
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'Map',
  created() {
    this.aMapoader()
  },
  beforeCreate() {
    this.map && this.map.destroy()
  },
  beforeDestroy() {
    this.map && this.map.destroy()
  },
  methods: {
    aMapoader() {
      AMapLoader.load({
        key: '89b13038f61dc3044c1aacbe46c49afb',
        version: '2.0',
        Loca: {
          version: '2.0'
        },
        plugins: ['AMap.IndexCluster']
      }).then(AMap => {
        const satelliteLayer = new AMap.TileLayer.Satellite({ detectRetina: true })
        const roadNetLayer = new AMap.TileLayer.RoadNet()
        this.map = new AMap.Map('map-container', {
          zoom: 4,
          layers: [satelliteLayer, roadNetLayer],
          defaultLayer: satelliteLayer
        })
        this.$emit('init', AMap, this.map)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
#map-container {
  .amap-copyright,
  .amap-logo {
    display: none !important;
  }

  .amap-marker-label {
    border: unset;
    background: unset;
    color: white;
    cursor: pointer;
  }
}
</style>
